<!-- 收货人管理 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收货人</title>
    <title>书瞳</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/popBox.css">
    <link rel="stylesheet" href="css/consignee.css">
    <!-- fontawesome字体 -->
    <link rel="stylesheet" href="font/font-awesome.min.css">
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="headerBox">
            <ul class="headerBox_left">
                <li class="activate_font"><a href="index.html" class="activate_font">书瞳</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="register.html">注册</a></li>
            </ul>

            <ul class="headerBox_right">
                <li><a href="star.html"><i class="fa fa-star activate_font"></i>&nbsp;&nbsp;收藏</a></li>
                <li><a href="cart.html"><i class="fa fa-cart-plus activate_font"></i>&nbsp;&nbsp;购物车</a></li>
                <li class="my">
                    <div>我的&nbsp;&nbsp;<i class="fa fa-caret-left activate_font"></i></div>
                    <ul class="mylist">
                        <li><a href="order.html">订单</a></li>
                        <li><a href="consignee.html">收货地址</a></li>
                        <li><a href="#" class="changePwd">修改密码</a></li>
                    </ul>

                </li>
            </ul>
        </div>

        <!-- 修改密码隐藏框 -->
        <!-- 编辑弹出框 -->
        <div class="outsideLayer" style="display: none;"></div>
        <div id="pwd" class="popBox" style="display: none;">
            <div class="popTitle">
                <span>修改密码</span>
                <span><a href="#" class="dropPop">×</a></span>
            </div>
            <div class="popContent">
                <div class="popItem">
                    <span>新密码</span>
                    <div>
                        <input type="password" />
                    </div>
                </div>
                <div class="popItem">
                    <span>确认密码</span>
                    <div>
                        <input type="password">
                    </div>
                </div>

            </div>
            <div class="popBtn">
                <button class="ok" id="pwdok">确认修改</button>
                <button class="cancel dropPop">取消</button>
            </div>
        </div>
    </div>

    <!-- 收货人 -->
    <div id="consignee">
        <!-- 收货人信息 -->

        <!-- 默认收货人 -->
        <div class="consigneeBox">
            <p>
                <span>收货人：</span>
                <span>刘强</span>
                <span class="default">默认</span>
                <!-- <span><i class="fa fa-trash-o" aria-hidden="true"></i></span> -->
            </p>
            <p>
                <span>收货地址：</span>
                <span>广东省佛山市南海区华南师范大学菜鸟驿站</span>
                <span class="do"><a href="#" class="edit">编辑</a></span>
            </p>
            <p>
                <span>联系电话：</span>
                <span>15992115701</span>
            </p>
        </div>

        <!-- 其他收货人 -->
        <div class="consigneeBox">
            <p>
                <span>收货人：</span>
                <span>刘强</span>
                <span class="do"><a href="#" class="trash"><i class="fa fa-trash-o" aria-hidden="true"></i></a></span>

            </p>
            <p>
                <span>收货地址：</span>
                <span>广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站广东省佛山市南海区华南师范大学菜鸟驿站</span>
                <span class="do">
                    <a href="#" class="do2">设为默认</a>
                    <a href="#" class="edit">编辑</a>
                </span>
            </p>
            <p>
                <span>联系电话：</span>
                <span>15992115701</span>
            </p>
        </div>

        <!-- 新增收货人 -->
        <div class="addBox">
            + 新建收货地址
        </div>
    </div>

    <!-- 编辑弹出框 -->
    <div id="info" class="popBox" style="display: none;">
        <div class="popTitle">
            <span>修改收货地址</span>
            <span><a href="#" class="dropPop">×</a></span>
        </div>
        <div class="popContent">
            <div class="popItem">
                <span>收货人</span>
                <div>
                    <input type="text" />
                </div>
            </div>
            <div class="popItem">
                <span>手机号码</span>
                <div>
                    <input type="text">
                </div>
            </div>
            <div class="popItem">
                <span>省份</span>
                <div>
                    <input type="text" value="广东">
                </div>
            </div>
            <div class="popItem">
                <span>城市</span>
                <div>
                    <input type="text" value="佛山">
                </div>
            </div>
            <div class="popItem detailAddress">
                <span>详细地址</span>
                <div>
                    <input type="text" value="南海区狮山镇华南师范大学">
                </div>
            </div>
        </div>
        <div class="popBtn">
            <button class="ok" id="infook">确认收货地址</button>
            <button class="cancel dropPop">取消</button>
        </div>
    </div>

    <!-- js代码 -->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/header.js"></script>
    <script>
        $(function () {
            /*
            编辑按钮被点
            **/
            $('.edit').click(function () {
                alert("edit");
            });

            /*
            设为默认按钮被点
            **/
            $('.do2').click(function () {
                alert("do2");
            });

            $('.addBox').click(function () {
                $('.outsideLayer').show();
                $('#info').show();
            });

            /*
            删除按钮被点
            **/
            $('.trash').click(function () {
                alert("trash");
            });

            /*
            弹出框确认按钮被点
            */
            $('#infook').click(function () {
                alert("infook");
            });
        })
    </script>

</body>

</html>